<template>
    <!-- 商品卡片：确认订单、确认虚拟商品订单、订单列表、售后订单列表、订单详情、售后单详情使用 -->
    <view class="goods-card">
        <view class="goods-item" @click="clickCardHandler">
            <view class="goods-img">
                <image class="img" :src="props.goodsData?.goodsImg || defaultImg"></image>
                <view v-if="tagContent" class="img-mask"> </view>
                <text v-if="tagContent" class="img-mask-content">{{ tagContent }}</text>
                <view class="goods-status" v-if="props.showGoodsTag && props.goodsData?.errorMsg">
                    <!-- 商品最多兑换X件一行展示不下需要截掉商品二字 -->
                    {{
                        props.goodsData?.errorCode == '3020007'
                            ? props.goodsData?.errorMsg.replace('商品', '')
                            : props.goodsData?.errorMsg
                    }}
                </view>
            </view>
            <view :class="tagContent && props.goodsData.refundStatus == 5 ? 'goods-refund goods-info' : 'goods-info'">
                <view class="goods-info-item">
                    <view class="goods-info-name">
                        <text v-if="[3, 4, 5].includes(Number(orderType))" class="sign">拼</text>
                        <text v-if="props?.goodsData?.fullReduceGoodAmount" class="full_decre_text"> 满减 </text>
                        {{ props.goodsData.goodsName }}
                    </view>
                    <view v-if="orderType == 6" class="goods-info-price">
                        <view v-if="props.goodsData.goodsPrice > 0">
                            {{ floatDivide(props.goodsData.goodsPrice, 100) }}元
                        </view>
                        <view v-if="props.goodsData.goodPoints > 0">
                            <text v-if="props.goodsData.goodsPrice > 0">+</text>
                            <text>{{ floatDivide(props.goodsData.goodPoints, 100) }}积分</text>
                        </view>
                    </view>
                    <view v-else class="goods-info-price">￥{{ floatDivide(props.goodsData.goodsPrice, 100) }}</view>
                </view>
                <view class="goods-info-item goods-info-skus">
                    <view class="goods-info-sku">{{ getSpecValue(props.goodsData) }}</view>
                    <view class="goods-info-num">
                        <view v-if="showRefundTag && props.goodsData.refundStatus == 12">
                            <view style="text-decoration: line-through; color: #999999"
                                >x {{ props.goodsData.goodsNum }}
                            </view>
                            <view v-if="showRefundTag && props.goodsData.refundStatus == 12">
                                x {{ props.goodsData.goodsNum - props.goodsData.refundGoodsCount }}
                            </view>
                        </view>
                        <view v-else>x {{ props.goodsData.goodsNum }} </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { floatDivide, getImgOssUrl } from '@/commons/utils.js';

const emits = defineEmits(['handleGoodsCardClick']);

const props = defineProps({
    orderType: {
        type: [Number, String],
        default: '1'
    },
    goodsData: {
        type: Object,
        default: () => {
            return {
                // 商品图片
                goodsImg: '',
                // 商品价格
                goodsPrice: '',
                // 商品积分价格
                goodsPoint: '',
                // 商品数量
                goodsNum: '',
                // 商品规格值
                specValueList: []
            };
        }
    },
    showGoodsTag: {
        type: Boolean,
        default: false
    },
    showRefundTag: {
        type: Boolean,
        default: false
    }
});
const defaultImg = ref(getImgOssUrl('/ui-prod-2.0.0/errorImg.png'));

// here: 商品部分退款、商品部分售后中、商品全部售后中、商品全部已退款 需要产品确认
const tagContent = computed(() => {
    let tagName = '';
    if (!props.showRefundTag) {
        tagName = '';
    } else {
        switch (props.goodsData.refundStatus) {
            case 1:
                tagName = '售后中';
                break;
            case 5:
                tagName = '已退款';
                break;
            case 12:
                tagName = '部分退款';
                break;
            default:
                break;
        }
    }
    return tagName;
});

const clickCardHandler = () => {
    emits('handleGoodsCardClick', props.goodsData);
};
const getSpecValue = val => {
    let ary = [];
    let str = '';
    val.specValueList &&
        val.specValueList.map(el => {
            ary.push(el.attributeValue);
        });
    str = ary.join(';');
    return str;
};
</script>

<style lang="scss" scoped>
.goods-card {
    .goods-item {
        display: flex;
        margin-bottom: 18rpx;
        background: #ffffff;
        .goods-img {
            width: 145rpx;
            height: 145rpx;
            border-radius: 7rpx;
            overflow: hidden;
            position: relative;
            .goods-status {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 43rpx;
                font-size: 22rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 43rpx;
                text-align: center;
                border-radius: 0 0 7rpx 7rpx;
                background: rgba(51, 51, 51, 0.4);
            }
            .img {
                width: 100%;
                height: 100%;
            }
            .img-mask {
                width: 94rpx;
                height: 94rpx;
                background: #333333;
                opacity: 0.6;
                position: absolute;
                top: 25rpx;
                left: 25rpx;
                border-radius: 50%;
                overflow: hidden;
            }
            .img-mask-content {
                line-height: 145rpx;
                text-align: center;
                width: 145rpx;
                position: absolute;
                top: 0;
                left: 0;
                font-size: 22rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
            }
        }
        .goods-info {
            margin-left: 18rpx;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .goods-info-item {
                display: flex;
                justify-content: space-between;
                .goods-info-name {
                    margin-right: 30rpx;
                    font-size: 25rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #33302d;
                    max-width: 408rpx;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    line-height: 36rpx;
                    height: 72rpx;
                    .sign {
                        width: 29rpx;
                        height: 29rpx;
                        margin: 0 4rpx;
                        font-size: 22rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                        line-height: 29rpx;
                        display: inline-block;
                        background: #fe292b;
                        border-radius: 4rpx;
                        text-align: center;
                    }
                    .full_decre_text {
                        padding: 0 4rpx;
                        background: #fe292b;
                        border-radius: 4rpx;
                        font-size: 22rpx;
                        color: #ffffff;
                        text-align: center;
                    }
                }
                .goods-info-price {
                    font-size: 29rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    text-align: right;
                    word-break: keep-all;
                }
            }
            .goods-info-skus {
                margin-bottom: 18rpx;
                color: #999999;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                align-items: flex-end;
                .goods-info-sku {
                    margin-right: 30rpx;
                    max-width: 408rpx;
                }
                .goods-info-num {
                    text-align: right;
                }
            }
        }
        .goods-refund {
            .goods-info-name,
            .goods-info-sku,
            .goods-info-num,
            .goods-info-price {
                text-decoration: line-through;
                color: #999999 !important;
            }
        }
    }
    .goods-item:nth-last-child(1) {
        margin-bottom: 0;
    }
}
</style>
